<template>
  <div class="dicom">
    <div ref="canvas" class="canvas" @cornerstoneimagerendered="onImageRendered"></div>

    <div class="canvas-tip">
      <span>WW/WC {{ww}}/{{wc}}</span>
      <span>{{$t('detail.image_position')}} {{imageIndex}}/{{dicomData.length-1}}</span>
    </div>
    <!-- <div class="footer">
      <span class="icon icon-duibi" :class="wwwcFlag? 'nowClick':''" @click="wwcDisplay"></span>
      <span class="icon icon-yidong" :class="panFlag? 'nowClick':''" @click="panDisplay"></span>
      <span class="icon icon-fangdajing" :class="zoomFlag? 'nowClick':''" @click="zoomDisplay"></span>
      <span class="icon icon-zhongzhi" @click="reset"></span>
    </div>-->
    <div class="footer">
      <span class="btn" :class="wwwcFlag? 'nowClick':''" @click="wwcDisplay">
        <span class="icon icon-duibi"></span>
        <span class="text">{{$t('detail.window')}}</span>
      </span>
      <span class="btn" :class="zoomFlag? 'nowClick':''" @click="zoomDisplay">
        <span class="icon icon-sy"></span>
        <span class="text">缩放移动</span>
      </span>
      <span class="btn" :class="panFlag? 'nowClick':''" @click="panDisplay">
        <span class="icon icon-fanse"></span>
        <span class="text">反转色</span>
      </span>
      <span class="btn">
        <span class="icon icon-zhongzhi" @click="reset"></span>
        <span class="text">{{$t('detail.reset')}}</span>
      </span>
    </div>
  </div>
</template>

<script>
import { getlungDicom } from "@/api/noduleList";
import * as cornerstone from "cornerstone-core";
import * as cornerstoneMath from "cornerstone-math";
import * as cornerstoneTools from "cornerstone-tools";
import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";
import * as cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
import * as dicomParser from "dicom-parser";
import Hammer from "hammerjs";

cornerstoneWebImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneTools.init();
export default {
  name: "viewDicom",
  components: {},
  props: ["ggoItem"],
  data() {
    return {
      ggoItems: null,
      dicomData: [],
      wwwcFlag: false, // wwwc列表flag
      panFlag: false, // 移动列表flag
      zoomFlag: false, // 放大镜列表flag
      imageIndex: 0, // 当前片位
      ww: 0,
      wc: 0,
    };
  },
  computed: {},
  watch: {
    ggoItem(val) {
      this.ggoItems = val;
      this.reset();
      this.updateTheImage(val.z);
    },
  },
  methods: {
    // 初始化
    updateTheImage(imageIndex) {
      this.$nextTick(() => {
        let element = this.$refs.canvas;
        let dsId = this.ggoItems.dsId;
        let _this = this;
        return cornerstone
          .loadAndCacheImage(
            "https://ds.pushiyixue.com/file/" +
              dsId +
              "/org_img/z/" +
              _this.dicomData[imageIndex]
          )
          .then(function (image) {
            _this.imageIndex = imageIndex;
            let viewport = cornerstone.getViewport(element);
            cornerstone.displayImage(element, image, viewport);
          });
      });
    },
    // 监听图像
    onImageRendered(e) {
      let eventData = e.detail;
      this.ww = Math.round(eventData.viewport.voi.windowWidth);
      this.wc = Math.round(eventData.viewport.voi.windowCenter);
      this.drawCount(e);
    },
    // 勾画函数封装
    drawCount(eventData) {
      const context = eventData.detail.canvasContext;
      let element = this.$refs.canvas;
      let item = this.ggoItems;
      if (parseInt(item.autoManual) === 0) {
        context.lineWidth = 0.8;
        let x = item.x;
        let y = item.y;
        let dim = item.diameterMm;
        x = parseInt(x) - parseInt(dim) / 2;
        x = x.toFixed(1);
        y = parseInt(y) - parseInt(dim) / 2;
        y = y.toFixed(1);
        context.beginPath();
        context.rect(x, y, dim, dim);
        context.strokeStyle = "red";
        context.fillStyle = "red";
        context.fillText(
          dim + "mm",
          parseInt(x) + parseInt(dim) + 10,
          parseInt(y) + 10
        );
        context.stroke();
      } else {
        let dim = item.diameterMm;
        context.beginPath();
        context.strokeStyle = "red";
        context.lineWidth = 0.8;
        let coordX = item.x.split(",");
        let coordY = item.y.split(",");
        context.font = "12px Verdana";
        context.fillStyle = "red";
        context.fillText(
          dim + "mm",
          parseInt(coordX[0]) + 15,
          parseInt(coordY[0]) + 15
        );
        coordX.forEach((item, index) => {
          if (index == 0) {
            context.moveTo(coordX[0], coordY[0]);
          } else {
            context.lineTo(coordX[index], coordY[index]);
          }
        });
        context.closePath();
        context.stroke();
      }
    },
    // wwwc工具
    wwcDisplay() {
      this.wwwcFlag = !this.wwwcFlag;
      this.panFlag = false;
      this.zoomFlag = false;
      if (this.wwwcFlag) {
        let WwwcTool = cornerstoneTools.WwwcTool;
        cornerstoneTools.addTool(WwwcTool);
        cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 1 });
      } else {
        cornerstoneTools.setToolDisabled("Wwwc");
      }
    },
    // 移动
    panDisplay() {
      let element = this.$refs.canvas;
      let viewport = cornerstone.getViewport(element);
      viewport.invert = !viewport.invert;
      cornerstone.setViewport(element, viewport);
      // this.panFlag = !this.panFlag;
      // this.zoomFlag = false;
      // this.wwwcFlag = false;
      // if (this.panFlag) {
      //   let PanTool = cornerstoneTools.PanTool;
      //   cornerstoneTools.addTool(PanTool);
      //   cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
      // } else {
      //   cornerstoneTools.setToolDisabled("Pan");
      // }
    },
    // 放大镜
    zoomDisplay() {
      this.zoomFlag = !this.zoomFlag;
      this.panFlag = false;
      this.wwwcFlag = false;
      if (this.zoomFlag) {
        let PanTool = cornerstoneTools.PanTool;
        cornerstoneTools.addTool(PanTool);
        cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });

        const ZoomTouchPinchTool = cornerstoneTools.ZoomTouchPinchTool;
        cornerstoneTools.addTool(ZoomTouchPinchTool);
        cornerstoneTools.setToolActive("ZoomTouchPinch", {
          mouseButtonMask: 1,
        });
      } else {
        cornerstoneTools.setToolDisabled("Zoom");
      }
    },
    // 重置
    reset() {
      let element = this.$refs.canvas;
      cornerstoneTools.setToolDisabled("Wwwc");
      cornerstoneTools.setToolDisabled("Pan");
      cornerstoneTools.setToolDisabled("Zoom");
      this.panFlag = false;
      this.wwwcFlag = false;
      this.zoomFlag = false;
      this.updateTheImage(this.ggoItems.z);
      cornerstone.reset(element);
    },
  },
  async created() {
    this.ggoItems = this.ggoItem;
    await getlungDicom(
      this.ggoItems.patientId,
      this.ggoItems.dsId,
      "diametermm",
      "ASC",
      1
    ).then((res) => {
      if (res.status.code === 200) {
        this.dicomData = res.data.images;
        // this.findggoData = res.data.analysisData;
        let element = this.$refs.canvas;
        cornerstone.enable(element);
        this.updateTheImage(this.ggoItem.z);
      }
    });
  },
  mounted() {},
  destroyed() {},
};
</script>
<style lang='scss' scoped>
.dicom {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 75vh;
  .canvas {
    width: 100%;
    height: 100%;
  }
}
.dicom::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.canvas-tip {
  position: absolute;
  padding: 0 0.15rem;
  box-sizing: border-box;
  bottom: 0.5rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 1;
  color: white;
  & span {
    display: inline-block;
    font-size: 0.14rem;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.15rem;
  box-sizing: border-box;
  height: 0.45rem;
  background: #4775d9;
  background-image: linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%);
  color: #fff;
  & .icon {
    font-size: 0.18rem;
  }
  & .btn {
    & .text {
      display: block;
      font-size: 0.12rem;
      margin-top: 0.02rem;
    }
  }
}
.nowClick {
  color: rgba(255, 0, 0, 0.87);
}
</style>